<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入产品关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
            <el-form-item label="" prop="type">
                <el-select v-model="sifterForm.type" placeholder="请选择" clearable @change="typeChange">
                    <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="title" label="政策名称"> </el-table-column>
            <el-table-column prop="name" label="类别" width="100"> </el-table-column>
            <el-table-column prop="sendtime" label="发布时间" width="180"> </el-table-column>
            <!-- <el-table-column prop="verify_state" label="审核状态" width="100">
                <template #default="props">
                    <span>{{props.row.verify_state=='1'?'已通过':'未通过'}}</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="" label="操作" width="100">
                <template #default="props">
                    <span v-if="props.row.isme!=0" class="pointer mr10 base-color" @click="editData(props.row)">查看详情</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span>政策详情</span>
        </div>
        <div class="form-box">
            <div class="head-title flex-row">
                <div class="flex-column ml10 head-title">
                    <span class="title mb10">{{detail.title||''}}</span>
                </div>
            </div>
            <div class="flex-row-center ju-flex-end mt10 mb10 base-gray-size">
                <span class="base-size mr10">类别：{{proxy.$utils.findObj(detail.type,types,'id').name}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><timer /></el-icon>{{detail.intime}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><document /></el-icon>{{detail.num}}</span>
            </div>
            <div class="line mb20"></div>
            <div v-html="detail.msg"></div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete,Timer,Phone,User,Document } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            type: '',
            currentpage: 1,
            pagesize: 10
        },
        types: [],
        detail: {}
    });

    // 获取政策类别
    proxy.$utils.getFinancialPolicyType(proxy).then(res=>{
        types.value = res;
    })

    const typeChange = (e)=>{
        console.log(e);
        if(e){
            sifterForm.value.type = e
            updalist(obj.sifterForm)
        }else{
            sifterForm.value.state = ''
            updalist(obj.sifterForm)
        }
    }

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'financialpolicy/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item)=>{
        console.log(item);
        if(item){
            proxy.$ajax({url: 'financialpolicy/get',data:{policy_id:item.policy_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    detail.value = {
                        ...d.msg,
                    }
                    isEdit.value = 1
                }else{}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }
    }
    
    let { list, types, sifterForm, isEdit, total, detail } = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>